<template>
	<transition name="FadeInLeft">
		<section class="suggest_wrap">
			<div class="suggest_head" @click="handlerSearch">搜索“{{ searchText }}”</div>
			
			<slot></slot>
			<div class="suggest_list">
				<ul>
					<li v-for="item,key in suggestList">
						<div class="flex align_center">
							<mu-icon value="search" class="mr-10" color="#ccc"></mu-icon>
							<div class="suggest_name">
								<p>{{ item.keyword }}</p>
								<mu-divider />
							</div>
						</div>

					</li>
				</ul>
				<!-- <mu-list>
					<template v-for="item,key in 5">
						<mu-list-item button>
							<mu-list-item-action>
								<mu-icon value="info"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>Inbox</mu-list-item-title>
						</mu-list-item>
						<mu-divider />
					</template>
				</mu-list> -->
			</div>
		</section>
	</transition>
</template>
<script>

	export default{
		name:'suggest',
		props:{
			searchText: '',
			suggestList: {
				type: Array,
				value: [],
			},
			loading_falg: false,
		},
		data(){
			return{

			}
		},
		mounted(){

		},
		methods:{
			handlerSearch(){
				this.$emit('handlerSearch')
			}
		}
	}
</script>
<style lang="scss" scoped>
@import '@/style/base/_color.scss';
	.suggest_wrap{
		.suggest_head{
			text-align: left;
			color: $blue;
			font-size: 16px;
			padding: 5px 0 15px ;
		}
		.suggest_list{
			li{
				&:first-child{
					border-top: 1px solid $border_1;
				}
				.suggest_name{
					text-align: left;
					width: 100%;
					p{
						padding: 10px 0;
					}
				}
			}
		}
	}
</style>